import React from 'react';
import { Form, Input, Button, Toast, Modal } from 'antd-mobile';
import { useLocation } from 'react-router-dom'
// 引入接口
import { dosendmsgcodeApi, docheckcodeApi } from '@/api/regist';
import { useHistory } from 'react-router-dom';

const Step2 = () => {
    const [form] = Form.useForm();
    const loc = useLocation();
    // console.log('loc', loc);
    const his = useHistory();
    // 点击下一步执行的函数
    const onSubmitFn = () => {
        const values = form.getFieldValue();
        // 首选需要验证短信验证码是否正确,调用接口验证
        docheckcodeApi({
            tel: loc.state.tel,
            telcode: values.telcode
        }).then(res => {
            console.log('验证短信验证码', res);
            if (res.data.code == 200) {
                // 直接跳转到下一步
                his.push({
                    pathname: '/regist/step3',
                    state: { tel: loc.state.tel }
                })
            } else {
                // 提示验证码
                Toast.show({
                    icon: 'fail',
                    content: res.data.message,
                })
            }
        })
    }

    // 点击发送验证码函数
    const sendMsgFn = () => {
        // 验证通过,发送数据请求
        dosendmsgcodeApi({ tel: loc.state.tel }).then(res => {
            console.log(res);
        })

    }
    return (
        <div style={{
            marginTop: '10px'
        }}>
            <Form
                layout='horizontal'
                form={form}
                footer={
                    <Button block type='submit' onClick={onSubmitFn} color='primary' size='large'>
                        下一步
                    </Button>
                }
            >
                <Form.Item label='短信验证码' name='telcode' extra={<a onClick={sendMsgFn}>发送验证码</a>}>
                    <Input placeholder='请输入' />
                </Form.Item>
            </Form>
        </div>
    );
}

export default Step2;
